<template>
  <div>
    <div class="tips">
      <i class="iconfont icon-warnbk"></i>
      您填写的信息将做加密处理，仅做额度分配认证使用
    </div>
    <div class="progress">
      <h3>基本资料完整度：{{progress}}%</h3>
      <div class="chart">
        <div class="bar" ref="bar"><i ref="curBar"></i></div>
        <p>{{progress}}%</p>
      </div>
    </div>
    <div class="menus">
      <router-link class="child" :to="menu.link" v-for="(menu, index) in menus" :key="index">
        <i class="iconfont avatar" :class="menu.icon"></i>
        <div class="info">
          <h4>{{menu.title}}</h4>
          <p>{{menu.desc}}</p>
        </div>
        <i class="iconfont link" :class="menu.state === '0' ? 'icon-gengduo' : ''"><p>{{menu.status}}</p></i>
      </router-link>
      <h4 class="litter-title">试一试填写以下资料，获得更高额度</h4>
      <div class="child" to="" @click="showTip">
        <i class="iconfont avatar icon-danbaojiaoyi"></i>
        <div class="info">
          <h4>担保人</h4>
          <p>获得更高额度，提高成功率</p>
        </div>
        <i class="iconfont link" :class="warrantor ? 'icon-gengduo' : ''"></i>
      </div>
    </div>
    <footer>
      <input class="footer-fullW-bt" type="button" value="返回" @click="back">
    </footer>
  </div>
</template>
<script>
  import $ from 'edom'

  export default {
    name: 'manage',
    data () {
      return {
        title: '认证中心',
        progress: 0,
        menus: [
          {icon: 'icon-geren', title: '完善身份信息', desc: '填写个人信息 实名认证', link: '/profile/step1', status: '', state: null},
          {icon: 'icon-tel', title: '添加联系人', desc: '父母、同事等联系方式', link: '/profile/step2', status: '', state: null},
          {icon: 'icon-shenfenzheng', title: '身份验证', desc: '上传身份证正反面', link: '/profile/step3', status: '', state: null},
          {icon: 'icon-fangchan', title: '附件信息', desc: '上传房产证等财产证明件', link: '/profile/step4', status: '', state: null},
          {icon: 'icon-zm', title: '芝麻信用', desc: '绑定芝麻信用分获取额度', link: '/profile/step5', status: '', state: null}
        ],
        warrantor: false
      }
    },
    computed: {
      curStep () {
        return this.$store.state.profileStep
      }
    },
    methods: {
      // 返回
      back () {
        this.$router.push('/mine')
      },
      // 如果不能进入担保人填写页面就进行提示
      showTip () {
        if (!this.warrantor) {
          $().Mnews('请等待基本信息审核通过', 1500)
        } else {
          console.log(this.warrantor)
          this.$router.push('/warrantor/manage')
        }
      },
      // 获取填写信息的进度
      getCheckInfo () {
        this.axios.post('/api/user/check_info_enroll', {
          user_id: this.$store.state.user_id,
          token: this.$store.state.token
        })
        .then((res) => {
          let desc = res.data.desc
          let state = desc.state
          let info = desc.info
          if (state === 0) {
            this.$store.commit('profileStepSet', 8)
            this.$store.commit('zmQuotaChecked')
          } else {
            this.$store.commit('profileStepSet', state)
          }
          this.menus[0].state = info.base_check
          this.menus[1].state = info.contact_status
          this.menus[2].state = info.check_status
          this.menus[3].state = info.attachment_status
          this.menus[4].state = info.zhima_status
          this.menus[0].status = this.getStateText(info.base_check)
          this.menus[1].status = this.getStateText(info.contact_status)
          this.menus[2].status = this.getStateText(info.check_status)
          this.menus[3].status = this.getStateText(info.attachment_status)
          this.menus[4].status = this.getStateText(info.zhima_status)
          if (info.base_check === '1' && info.contact_status === '1' && info.check_status === '1' && info.zhima_status === '1') {
            this.warrantor = true
          }
          this.setProgress()
        })
      },
      // 返回状态文本
      getStateText (num) {
        num = +num
        switch (num) {
          case 0:
            return ''
          case 1:
            return '已通过'
          case 2:
            return '未通过'
          case 3:
            return '审核中'
          default:
            return '已通过'
        }
      },
      // 获取个人基本信息
      getSavedBase () {
        this.axios.post('/api/auth/get_base_info', {
          user_id: this.$store.state.user_id,
          token: this.$store.state.token
        }).then((res) => {
          let data = res.data.desc
          if (data.base_check === '1' || data.base_check === '3') {
            data['checkStatus'] = true
          }
          data = Object.assign({
            ownAddress: data.pid_name + ' ' + data.cid_name + ' ' + data.rid_name,
            companyAddress: data.cpid_name + ' ' + data.ccid_name + ' ' + data.crid_name
          }, data)
          if (data.real_name) {
            this.$store.commit('getCacheBaseInfo', data)
          }
        })
      },
      // 获取联系人信息
      getSavedContact () {
        this.axios.post('/api/auth/get_contact_info', {
          user_id: this.$store.state.user_id,
          token: this.$store.state.token
        }).then((res) => {
          let data = res.data
          let desc = data.desc
          let obj = {
            info: desc.contact_list,
            checkStatus: desc.contact_status === '1' || desc.contact_status === '3'
          }
          if (desc.contact_list) {
            this.$store.commit('getCacheContact', obj)
          }
        })
      },
      // 获取身份证信息
      getSavedIDcard () {
        this.axios.post('/api/auth/get_idcard_info', {
          user_id: this.$store.state.user_id,
          token: this.$store.state.token
        }).then((res) => {
          let data = res.data
          let desc = data.desc
          desc['checkStatus'] = desc.check_status === '1' || desc.check_status === '3'
          if (desc.id_card_front) {
            this.$store.commit('getCacheIDcard', desc)
          }
        })
      },
      // 获取附件
      getSavedAttach () {
        this.axios.post('/api/auth/get_attachment_info', {
          user_id: this.$store.state.user_id,
          token: this.$store.state.token
        }).then((res) => {
          let data = res.data
          let desc = data.desc
          let newArr = $().arrDelNull(desc.info)
          let obj = {
            info: newArr,
            checkStatus: desc.attachment_status === '1' || desc.attachment_status === '3'
          }
          if (desc.info[0]) {
            this.$store.commit('getCacheAttach', obj)
          }
        })
      },
      // 设置每一项状态
      setProgress () {
        // 读取进度
        this.progress = (this.curStep - 1) * 20
        this.progress = this.progress > 100 ? 100 : this.progress
        // 进度动画
        let refs = this.$refs
        let barEle = refs.bar
        let curBar = refs.curBar
        let curWidth = barEle.offsetWidth / 5 * (this.curStep - 1)
        curBar.style.width = curWidth + 'px'
      }
    },
    created () {
      this.setTitle(this.title)
      // 获取所有的信息填写情况
      this.getCheckInfo()
      this.getSavedBase()
      this.getSavedContact()
      this.getSavedIDcard()
      this.getSavedAttach()
    },
    mounted () {
      // 拿到 进入填写资料页面的凭证
      this.$store.commit('setAllProfileGetStatus')
    }
  }
</script>
<style lang="scss" scoped>
  @import '../../styles/form.scss';
  .tips{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: rem(65);
    line-height: rem(65);
    background: #72a5ef;
    font-size: rem(26);
    color: #fff;
    i{
      margin-right: rem(10);
      font-size: rem(32);
    }
  }
  .progress{
    margin-bottom: rem(27);
    background: #fff;
    padding: rem(35) 0 rem(40);
    h3{
      margin-bottom: rem(32);
      font-size: rem(30);
      color: #141414;
      text-align: center;
      font-weight: bold;
    }
    .chart{
      display: flex;
      justify-content: center;
      align-items: center;
      .bar{
        position: relative;
        width: rem(560);
        height: rem(20);
        border-radius: 20px;
        background: #cee1fd;
        overflow: hidden;
        i{
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          width: 0;
          background: #72a5ef;
          transition: width 1s ease-out;
        }
      }
      p{
        margin-left: rem(10);
        font-size: rem(26);
        color: #141414;
        font-weight: bold;
      }
    }
  }
  .menus{
    padding-bottom: rem(100);
    .child{
      margin-bottom: rem(20);
      padding: rem(30) rem(45) rem(30) rem(55);
      display: flex;
      align-items: center;
      background: #fff;
      .avatar{
        margin-right: rem(50);
        font-size: rem(72);
        color: #72a5ef;
      }
      .info{
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        h4{
          font-size: rem(30);
          color: #141414;
          font-weight: 700;
        }
        p{
          font-size: rem(24);
          color: #666;
        }
      }
      .link{
        font-size: rem(36);
        color: #72a5ef;
        p{
          font-size: rem(26);
        }
      }
    }
    .litter-title{
      margin-bottom: rem(20);
      padding-left: rem(24);
      font-size: rem(28);
      color: #000;
      font-weight: 700;
    }
  }
  footer{
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    height: rem(100);
  }
</style>
